<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../admin/css/other/result.css" />
    <style>
        .show {
            /* font-size: 20px; */
            padding-left: 50px;
            padding-right: 20px;
        }

        .show .datas {
            float: right;
        }

        .show .datas .num {
            padding-right: 10px;
            color: #36B368;
        }
    </style>
</head>

<body class="pear-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header" style="text-align: center;">
                    查询信息
                </div>
                <div class="layui-card-body">
                    <form class="layui-form" action="http://localhost/LSTM_car_comment/public/web/ksh/wordsCloudUpdate"
                        onsubmit="return false">
                        <div class="layui-form-item">
                            <label class="layui-form-label">车型</label>
                            <div class="layui-input-block">
                                <select name="model" lay-verify="required" lay-search>
                                    <option value="all">所有车型</option>
                                    <option value="奥迪A3">奥迪A3</option>
                                    <option value="奥迪A4">奥迪A4</option>
                                    <option value="奥迪A6L">奥迪A6L</option>
                                    <option value="奥迪Q5">奥迪Q5</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">主题</label>
                            <div class="layui-input-block">
                                <select name="theme" lay-verify="required" lay-search>
                                    <option value="all">全部</option>
                                    <option value="油耗">油耗</option>
                                    <option value="动力">动力</option>
                                    <option value="操控">操控</option>
                                    <option value="内饰">内饰</option>
                                    <option value="外观">外观</option>
                                    <option value="空间">空间</option>
                                    <option value="舒适性">舒适性</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="submit">查询</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header" style="text-align: center;">
                    统计信息
                </div>
                <div class="layui-card-body">
                    <p class="show"><span>评论数量：</span> <span id="comnum" class="datas"><span
                                class="num">1646</span>条</span></p>
                </div>
                <div class="layui-card-body">
                    <p class="show"><span>关键词数量：</span> <span id="wordsnum" class="datas"><span
                                class="num">1542</span>组</span>
                    </p>
                </div>
                <div class="layui-card-body">
                    <p class="show"><span>总体满意度：</span> <span id="acc" class="datas"><span class="num">满意</span></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-header" style="text-align: center;font-size: large;font-weight: 900;">
                    负面评价高频关键词
                </div>
                <div class="layui-card-body">
                    <div id="wordCloudChart" style="min-height: 400px"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../mini/lib/wordcloud/echarts.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../mini/lib/wordcloud/worldcloud.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../component/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        const host = "http://localhost/LSTM_car_comment/public/";
        layui.use(['form', 'laydate'], function () {
            var $ = layui.jquery;
            var form = layui.form;
            var laydate = layui.laydate;
            form.render();
            laydate.render({
                elem: '#sDate',
                trigger: 'click'
            });
            laydate.render({
                elem: '#eDate',
                trigger: 'click'
            });
            //词云初始化
            $.get(host + 'web/ksh/wordsCloudInit', function (data) {
                console.log(data);
                var data2 = new Array();
                for (var i = 0; i < data.length; i++) {
                    data2.push(data[i].KeyWords);
                }
                console.log(data2);
                setData(data2);
            });
            //表单提交
            form.on('submit(submit)', function (data) {
                console.log(data.field);
                $.post(host + 'web/ksh/comnumupdate', data.field,
                    function (res) {
                        $("#comnum .num").html(res);
                    });
                $.post(host + 'web/ksh/wordsnumupdate', data.field,
                    function (res) {
                        $("#wordsnum .num").html(res[0].num);
                    });
                $.post(host + 'web/ksh/accupdate', data.field,
                    function (res) {
                        $("#ac .num").html(res);
                    });
                $.post(host + 'web/ksh/wordsCloudUpdate', data.field,
                    function (res) {
                        //res就是返回的结果
                        console.log(res);
                        var data2 = new Array();
                        for (var i = 0; i < res.length; i++) {
                            data2.push(res[i].KeyWords);
                        }
                        console.log(data2);
                        setData(data2);
                    });
                return false;
            });
            $.get(host + "web/ksh/comnum", function (data) {
                $("#comnum .num").html(data);
            });
            $.get(host + "web/ksh/wordsnum", function (data) {
                $("#wordsnum .num").html(data[0].num);
            });
            $.get(host + "web/ksh/acc", function (data) {
                $("#acc .num").html(data);
            });
        });
        //词云
        //传入echarts中的data
        var dataList = [];
        //初始词的大小
        var initVal = 9999
        //添加一个数据
        function setData(wordsArr) {
            dataList = [];
            //所有页面输入的词
            //按行分割成数组
            for (var i = 0; i < wordsArr.length; i++) {
                var word = wordsArr[i];
                //每次生成的词大小降低30%
                initVal = initVal * 0.8
                //数据封装到json对象，添加到list中
                var appendData = {
                    name: word,
                    value: initVal,
                    itemStyle: createRandomItemStyle()
                }
                dataList.push(appendData)
            }

            world_cloud(dataList);

        }
        //随机生成词的颜色
        function createRandomItemStyle() {
            return {
                normal: {
                    color: 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')'
                }
            };
        }
        //生成词图
        function world_cloud(dataList) {
            var myChart = echarts.init(document.getElementById('wordCloudChart'));
            var option = {
                tooltip: {},
                series: [{
                    type: 'wordCloud',
                    shape: 'smooth',
                    gridSize: 2,
                    sizeRange: [25, 100],
                    rotationRange: [0, 0],
                    textStyle: {
                        normal: {
                            color: function () {
                                return 'rgb(' + [Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                                ]
                                    .join(',') + ')';
                            }
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    data: dataList
                }]
            }
            myChart.setOption(option);
        }
    </script>
</body>

</html>